import React from "react";
import {
  View,
  TouchableOpacity,
  Text,
  Platform,
  Linking,
  Switch,
  AsyncStorage
} from "react-native";

import SizeUtils from "../../common/SizeUtils";
import ToastUtils from "../../common/ToastUtils";
import CommonStyles from "../../common/CommonStyles";
import Config from "../../config";
import BasePage from "../common/BasePage";
import LoginCheckVersionAction from "../../actions/login/LoginCheckVersionAction";

const BTN_LABEL = ["评论回复消息", "活动消息", "运动消息", "系统提示消息"];

const SwitchButton = ({ title, onValueChange, disabled, value, style }) => {
  return (
    <View
      style={[
        {
          paddingHorizontal: SizeUtils.translateDesignWidthToCode(28),
          height: SizeUtils.translateDesignHeightToCode(86),
          flexDirection: "row",
          alignItems: "center",
          borderBottomWidth: SizeUtils.translateDesignNumToCode(3),
          borderColor: "#f2f2f2"
        },
        style
      ]}
    >
      <View>
        <Text
          style={{
            fontSize: SizeUtils.translateFontSizeToCode(28),
            color: "#000000"
          }}
        >
          {title}
        </Text>
      </View>
      <View
        style={{
          flex: 1,
          alignItems: "flex-end"
        }}
      >
        <Switch
          style={{ backgroundColor: "transparent" }}
          disabled={disabled}
          onTintColor="#4cd964"
          onValueChange={onValueChange}
          value={value}
        />
      </View>
    </View>
  );
};

export default class UserTuisongPage extends BasePage {
  constructor(props) {
    super(props);
    this.state = {
      disabled: false,
      plhf: true, // 评论回复
      hdxx: true, // 活动消息
      ydxx: true, // 运动消息
      xtts: true //系统提示消息
    };
  }
  componentDidMount() {
    this.getInitData();
  }
  _dealEnterPage() {
    this.getInitData();
  }
  getInitData(){
    let that = this;
    AsyncStorage.getItem("switch",function(errs, result) {
      if (result) {
        let jso = JSON.parse(result);
        that.setState({
          plhf: jso.plhf, // 评论回复
          hdxx: jso.hdxx, // 活动消息
          ydxx: jso.ydxx, // 运动消息
          xtts: jso.xtts //系统提示消息
        });
      }
    })
  }
  changeSwitch(switchName, value) {
    const newState = {};
    newState[switchName] = value;
    this.setState(newState);

    AsyncStorage.setItem("switch", JSON.stringify({...this.state,...newState}));
  }

  render() {
    const { disabled, plhf, hdxx, ydxx, xtts } = this.state;
    return (
      <View
        style={[
          CommonStyles.page,
          {
            paddingTop: Config.paddingTop,
            flex: 1,
            backgroundColor: "#ffffff",
            alignItems: "center"
          }
        ]}
      >
        <SwitchButton
          title={BTN_LABEL[0]}
          disabled={disabled}
          onValueChange={value => this.changeSwitch("plhf", value)}
          value={plhf}
        />
        <SwitchButton
          title={BTN_LABEL[1]}
          disabled={disabled}
          onValueChange={value => this.changeSwitch("hdxx", value)}
          value={hdxx}
        />
        <SwitchButton
          title={BTN_LABEL[2]}
          disabled={disabled}
          onValueChange={value => this.changeSwitch("ydxx", value)}
          value={ydxx}
        />
        <SwitchButton
          title={BTN_LABEL[3]}
          disabled={disabled}
          onValueChange={value => this.changeSwitch("xtts", value)}
          value={xtts}
        />
        {this._renderNavigationBar()}
      </View>
    );
  }
}
